import {Box, Flex, Heading, Image, ScrollView, Switch, Text, Button, Pressable} from 'native-base';
import React, {useState} from 'react';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
import SvgIcons from '@/assets/svg';
import ChatNavigation from './Navigation';
import {useNavigation, CommonActions} from '@react-navigation/native';

const ChatSettings = () => {
  const insets = useSafeAreaInsets();
  const navigation = useNavigation();
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  const addMember = () => {
    navigation.navigate('ChatAddUser' as never);
  };
  const removeMember = () => {
    navigation.navigate('ChatRemoveUser' as never);
  };
  const members = [
    {
      id: 1,
      name: '张三',
      nickname: '三哥',
      position: '前端工程师',
      avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
    },
    {
      id: 2,
      name: '李四',
      nickname: '四哥',
      position: '后端工程师',
      avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
    },
    {
      id: 3,
      name: '王五',
      nickname: '五哥',
      position: '产品经理',
      avatar: 'https://randomuser.me/api/portraits/men/3.jpg',
    },
    {
      id: 4,
      name: '赵六',
      nickname: '六哥',
      position: 'UI设计师',
      avatar: 'https://randomuser.me/api/portraits/men/4.jpg',
    },
    {
      id: 5,
      name: '孙七',
      nickname: '七哥',
      position: '运营经理',
      avatar: 'https://randomuser.me/api/portraits/men/5.jpg',
    },
    {
      id: 6,
      name: '孙八',
      nickname: '八哥',
      position: '测试工程师',
      avatar: 'https://randomuser.me/api/portraits/men/6.jpg',
    },
    {
      id: 7,
      name: '周九',
      nickname: '九哥',
      position: '运维工程师',
      avatar: 'https://randomuser.me/api/portraits/men/7.jpg',
    },
    {
      id: 8,
      name: '吴十',
      nickname: '十哥',
      position: '数据库管理员',
      avatar: 'https://randomuser.me/api/portraits/men/8.jpg',
    },
    {
      id: 9,
      name: '郑十一',
      nickname: '十一哥',
      position: '网络安全工程师',
      avatar: 'https://randomuser.me/api/portraits/men/9.jpg',
    },
    {
      id: 10,
      name: '王十二',
      nickname: '十二哥',
      position: '前端工程师',
      avatar: 'https://randomuser.me/api/portraits/men/10.jpg',
    },
    {
      id: 11,
      name: '李十三',
      nickname: '十三哥',
      position: '后端工程师',
      avatar: 'https://randomuser.me/api/portraits/men/11.jpg',
    },
    {
      id: 12,
      name: '张十四',
      nickname: '十四哥',
      position: '产品经理',
      avatar: 'https://randomuser.me/api/portraits/men/12.jpg',
    },
    {
      id: 13,
      name: '赵十五',
      nickname: '十五哥',
      position: 'UI设计师',
      avatar: 'https://randomuser.me/api/portraits/men/13.jpg',
    },
    {
      id: 14,
      name: '钱十六',
      nickname: '十六哥',
      position: '运营经理',
      avatar: 'https://randomuser.me/api/portraits/men/14.jpg',
    },
    {
      id: 15,
      name: '孙十七',
      nickname: '十七哥',
      position: '测试工程师',
      avatar: 'https://randomuser.me/api/portraits/men/15.jpg',
    },
    {
      id: 16,
      name: '周十八',
      nickname: '十八哥',
      position: '运维工程师',
      avatar: 'https://randomuser.me/api/portraits/men/16.jpg',
    },
    {
      id: 17,
      name: '吴十九',
      nickname: '十九哥',
      position: '数据库管理员',
      avatar: 'https://randomuser.me/api/portraits/men/17.jpg',
    },
    {
      id: 18,
      name: '郑二十',
      nickname: '二十哥',
      position: '网络安全工程师',
      avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
    },
    {
      id: 19,
      name: '张二十一',
      nickname: '二十一哥',
      position: '前端工程师',
      avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
    },
    {
      id: 20,
      name: '李二十二',
      nickname: '二十二哥',
      position: '后端工程师',
      avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
    },
    {
      id: 21,
      name: '王二十三',
      nickname: '二十三哥',
      position: '产品经理',
      avatar: 'https://randomuser.me/api/portraits/men/21.jpg',
    },
    {
      id: 22,
      name: '赵二十四',
      nickname: '二十四哥',
      position: 'UI设计师',
      avatar: 'https://randomuser.me/api/portraits/men/22.jpg',
    },
  ];
  const dismissChat = () => {
    navigation.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [{name: 'Tbabar'}],
      }),
    );
  };
  const renderList = () => {
    const list = [
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '会诊室名称',
        rightName: '交流电系统会...',
        navigation: 'ChatSetName',
      },
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '会诊室标签',
        rightName: '火气|燃气轮...',
        navigation: 'ChatSetLabel',
      },
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '设置为公开',
        type: 'switch',
      },
    ];
    const navigationItem = item => {
      if (item?.navigation) {
        navigation.navigate(item.navigation as never);
      }
    };
    const renderSwitch = () => {
      return <Switch size="sm" onValueChange={toggleSwitch} value={isEnabled}></Switch>;
    };
    const renderDefault = item => {
      return (
        <Pressable flexDir="row" onPress={() => navigationItem(item)}>
          <Text>{item.rightName}</Text>
          <SvgIcons.ChevronLeftIcon style={{transform: [{rotate: '180deg'}]}} width={24} height={24} color="#0084ff" />
        </Pressable>
      );
    };
    return (
      <Box pb="4">
        {list.map(item => {
          return (
            <Box flexDir="row" py="4" mx="4" key={item.title} justifyItems="center" alignItems="center">
              <Flex flex={1} flexDir="row" alignItems="center">
                <SvgIcons.Weibo width={24} height={24} color="#0084ff" />
                <Text fontSize="md" pl="3">
                  {item.title}
                </Text>
              </Flex>
              <Box>{item.type === 'switch' ? renderSwitch() : renderDefault(item)}</Box>
            </Box>
          );
        })}
      </Box>
    );
  };
  return (
    <SafeAreaView style={{flex: 1, backgroundColor: 'white', paddingTop: insets.top, paddingBottom: insets.bottom}} edges={['left', 'right']}>
      <ChatNavigation title="会诊室设置" showMore={false} />
      {renderList()}
      <Box p="4" pt="0" flex={1}>
        <Heading pt="0" size="md">
          会诊室成员
        </Heading>
        <ScrollView flex={1}>
          <Box w="full" flex={1} flexDir="row" flexWrap="wrap">
            {members.map((member, index) => (
              <Box alignItems="center" justifyContent="center" w="1/4" h={100} key={index}>
                <Image alt="member" source={{uri: member.avatar}} style={{width: 50, height: 50, borderRadius: 5}}></Image>
                <Text>{member.name}</Text>
              </Box>
            ))}
            <Box alignItems="center" justifyContent="center" w="1/4" h={100}>
              <Pressable style={{width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center'}} onPress={() => addMember()}>
                <Box borderColor="gray.300" borderWidth={3} w="2/3" h="2/3" alignItems="center" justifyContent="center">
                  <SvgIcons.AddIcon width={30} color="red" />
                </Box>
              </Pressable>
            </Box>
            <Box alignItems="center" justifyContent="center" w="1/4" h={100}>
              <Pressable style={{width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center'}} onPress={() => removeMember()}>
                <Box borderColor="gray.300" borderWidth={3} w="2/3" h="2/3" alignItems="center" justifyContent="center">
                  <SvgIcons.MinusIcon width={30} color="red" />
                </Box>
              </Pressable>
            </Box>
          </Box>
        </ScrollView>
      </Box>
      <Box w="full" p="8" pt="1">
        <Button bg="red.500" py="4" onPress={dismissChat}>
          <Text bold color="white">
            退出并解散会诊室
          </Text>
        </Button>
      </Box>
    </SafeAreaView>
  );
};

export default ChatSettings;
